import type { PropsWithChildren } from 'react';

import { themeColors } from '@/common/theme';
import { getAntdTheme, setupThemeVarsToHtml } from '@/common/theme/shared';
import { useThemeSettings } from '@/common/theme/themeHook';
import { antdLocales } from '@/locales/antd';
import { localStg } from '@/utils/storage';

import { useLang } from '../lang';
import { useTheme } from '../theme';

import type { WatermarkProps } from 'antd';

const WATERMARK_CONFIG = {
	font: {
		fontSize: 16
	},
	height: 128,
	offset: [12, 60],
	rotate: -15,
	width: 240,
	zIndex: 9999
} satisfies WatermarkProps;

// useAntdTheme：自定义 Hook，用于生成 Ant Design 主题配置和水印信息
// 返回 antdTheme（主题配置对象）、watermarkText（水印文本）、watermarkVisible（水印是否显示）
function useAntdTheme() {
	const themeSettings = useThemeSettings();
	const colors = useAppSelector(themeColors);
	const { darkMode } = useTheme();
	const antdTheme = getAntdTheme(colors, darkMode, themeSettings.tokens);
	useEffect(() => {
		setupThemeVarsToHtml(colors, themeSettings.tokens, themeSettings.recommendColor);
		localStg.set('themeColor', colors.primary);
	}, [colors, themeSettings]);
	const info = `当前配置的主题颜色为：${colors.primary}`;
	console.info(`%c${info}`, `color: ${colors.primary}`);
	// console.log('[ 当前的项目的配置信息如下: ] >', themeSettings);
	return {
		antdTheme,
		watermarkText: themeSettings.watermark.text,
		watermarkVisible: themeSettings.watermark.visible
	};
}

// AntdConfig 组件：为全局提供 Ant Design 配置（主题、国际化、水印等），包裹所有子组件
// 参数 children：需要被包裹的子组件内容
function AntdConfig({ children }: Readonly<PropsWithChildren>) {
	const { locale } = useLang();
	const { antdTheme, watermarkText, watermarkVisible } = useAntdTheme();
	return (
		<AConfigProvider
			button={{ classNames: { icon: 'align-1px  text-icon' } }}
			card={{ styles: { body: { flex: 1, overflow: 'hidden', padding: '12px 16px ' } } }}
			locale={antdLocales[locale]}
			theme={antdTheme}
		>
			<AWatermark
				content={watermarkVisible ? (watermarkText ?? 'h-admin') : ''}
				{...WATERMARK_CONFIG}
			>
				{children}
			</AWatermark>
		</AConfigProvider>
	);
}

export default AntdConfig;
